/*
*参赛弹出框
*TakePartInGame.js*/

import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input, Icon,Select } from 'antd';
import { connect } from 'react-redux';

const Option = Select.Option;
const FormItem = Form.Item;


const TakePartGameForm = Form.create()(
	(props) => {
		const { visible, 
			onCancel, 
			onCreate, 
			form ,
			name,
			pdtArr,
			nameId,
			fundGameList,DetailsData} = props;
		const { getFieldDecorator } = form;
		const ZoneArr = DetailsData
		const myProps={
			onChange:(v)=>{
				console.log('vvvv',v)
				props.getDetails({
					id:v
				})
			},
			placeholder:"请输入",
			style:{width:150}
		}
		console.log('ZoneArr',ZoneArr)
		return (
			visible ?
				<Modal
					className={` add-takeGame`}
					visible={visible}
					title="参赛报名"
					okText="提交"
					onCancel={onCancel}
					onOk={onCreate}
				>
					<Form layout="vertical">
						<FormItem label="选择私募管理人:">
              {getFieldDecorator('choiceManager', {
                rules: [{ required: true, message: '请选择比赛' }],
              })(

                <Select>
									<Option value={nameId} >{name}</Option>
								</Select>
              )}
            </FormItem>
            <FormItem label="选择产品(多选):">
              {getFieldDecorator('choicePdt', {
                rules: [{ required: true, message: '请选择产品' }],
              })(
                <Select mode="multiple">
									{
										pdtArr.map((item,i)=><Option value={`${item.fundId}`} key={i}>{item.productName}</Option>)
									}
								</Select>
              )}
            </FormItem>
            <FormItem label="选择比赛:">
              {getFieldDecorator('choiceGame', {
                rules: [{ required: true, message: '请选择比赛' }],
              })(
                <Select
                	{...myProps}
                >
									{
										fundGameList.map((item,i)=><Option value={`${item.id}`} key={i}>{item.name}</Option>)
									}
								</Select>
              )}
            </FormItem>
            <FormItem label="选择赛区(多选):">
              {getFieldDecorator('choiceZone', {
                rules: [{ required: true, message: '请选择赛区' }],
              })(
                <Select mode="multiple">
									{
										ZoneArr?ZoneArr.divisionList.map((item,i)=><Option value={`${item.id}`} key={i}>{item.name}</Option>):null
									}
								</Select>
              )}
            </FormItem>
            
					</Form>
				</Modal> : null
		);
	},
);
const mapStateToProps = state => ({
	DetailsData:state.privateMger.DetailsData
});
const mapDispatchToProps = {
	getDetails: query => ({
		type: 'privateMger/getDetails',
		payload: query || {},
	}),
	gameSignUp: query => ({
		type: 'privateMger/gameSignUp',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class TakePartGame extends PureComponent {
	static propTypes = {
		form: PropTypes.object.isRequired,
	}
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}
	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-takeGame .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}
	}

	showModal = () => {
		this.setState({ visible: true });
	}

	handleCancel = () => {
		this.setState({ visible: false });
	}

	handleCreate = () => {
		const form = this.form;
		const {gameSignUp} =  this.props
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			console.log('Received values of form:>>>', values);
			form.resetFields();
			this.setState({ visible: false });
			gameSignUp({})
		});
	}

	saveFormRef = (form) => {
		this.form = form;
	}

	render() {
		return (
			<div >
				<a onClick={this.showModal}>参赛</a>
				<TakePartGameForm
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
					name={this.props.name}
					pdtArr={this.props.pdtArr}
					nameId={this.props.nameId}
					fundGameList={this.props.fundGameList}
					getDetails={this.props.getDetails}
					DetailsData={this.props.DetailsData}
				/>
			</div>
		);
	}
}
export default Form.create({
})(TakePartGame);